<template>
    <div class="f-c">
        <!-- 表头名称 -->
        <span>{{ name }}</span>
        <!-- 自定义筛选组件 -->
        <el-dropdown trigger="click" @command="setCommand">
            <i
                class="pc-iconfont icon-shaixuan-mian dropdown-i"
                :class="{ 'dropdown-active': modelValue || modelValue === 0 }"
                @click="dropdownVisibleChange"
            />
            <template #dropdown>
                <div v-if="showSearch" style="padding: 8px 10px 4px">
                    <el-input
                        v-model="inputText"
                        @input="bindInputFilters"
                        @visible-change="dropdownVisibleChange"
                        :placeholder="placeholder"
                    />
                </div>
                <el-scrollbar max-height="270px">
                    <el-dropdown-menu>
                        <el-dropdown-item
                            v-for="row in filtersList"
                            :command="getDropdownId(row)"
                            :class="{ 'select-active': getDropdownId(row) === modelValue }"
                        >
                            {{ getDropdownName(row) }}
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-scrollbar>
            </template>
        </el-dropdown>
    </div>
</template>
<script setup lang="ts">
    import { PropType, ref, watch } from "vue";
    import { debounce } from "@/utils";
    import { TypeFilters } from "@/interface/filters";

    const emit = defineEmits(['update:modelValue', 'change']);

    const props = defineProps({
        name: {
            type: String,
            default: ''
        },
        modelValue: {
            type: [Number, String],
            default: ''
        },
        placeholder: {
            type: String,
            default: '请输入名称搜索'
        },
        filters: {
            type: Array as PropType<TypeFilters.filter[]>,
            default: () => {
                return [];
            }
        },
        props: {
            type: Object,
            default: () => {
                return { value: 'value', label: 'label' }
            }
        },
        showSearch: {
            type: Boolean,
            default: false
        },
    });

    let inputText = ref<string>('');
    let filtersList = ref<TypeFilters.filter[]>([]);
    let selectAll: TypeFilters.filter[] = [];

    const getFilters = () => {
        if (inputText.value) {
            let _value: TypeFilters.filter[] = [];
            for (let row of props.filters) {
                const _label = getDropdownName(row);
                if (_label && _label.includes(inputText.value)) {
                    _value.push(row);
                }
            }
            filtersList.value = [...selectAll, ..._value];
        } else {
            filtersList.value = [...selectAll, ...props.filters];
        }
    }

    const getDropdownId = (row: TypeFilters.filter) => {
        return row[props.props.value as 'value']
    }

    const getDropdownName = (row: TypeFilters.filter) => {
        return row[props.props.label as 'label']
    }

    const dropdownVisibleChange = () => {
        inputText.value = '';
        getFilters();
    };

    const bindInputFilters = debounce(() => {
        getFilters();
    });

    watch(() => props.filters, () => {
        const _allObj: TypeFilters.filter = {} as TypeFilters.filter;
        _allObj[`${props.props.value}` as 'value'] = '';
        _allObj[`${props.props.label}` as 'label'] = '全部';
        selectAll = [_allObj];
        getFilters();
    }, {
        immediate: true,
        deep: true
    });

    const setCommand = (val: number | string) => {
        emit('update:modelValue', val);
        emit('change')
    }
</script>

<style scoped lang="scss">
    .dropdown-i {
        cursor: pointer;
        color: var(--el-table-header-text-color);
    }

    .dropdown-active, :deep(.select-active) {
        color: var(--el-color-primary);
    }

    :deep(.select-active) {
        background-color: var(--el-color-primary-light-9);
    }
</style>